<template>
	<cl-crud @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-flex1 />
			<cl-search-key />
		</el-row>

		<el-row>
			<cl-table
				:props="{
					'default-sort': {
						prop: 'createTime',
						order: 'descending'
					}
				}"
				:columns="[
					{
						label: 'LOGO',
						prop: 'logo',
						align: 'center'
					},
					{
						label: '名称',
						prop: 'name',
						align: 'center'
					},
					{
						label: '描述',
						prop: 'description',
						align: 'center'
					},
					{
						label: '下载地址',
						prop: 'downloadUrl',
						align: 'center'
					},
					{
						prop: 'type',
						label: '类型',
						align: 'center'
					},
					{
						prop: 'devUserId',
						label: '开发者ID',
						align: 'center'
					},
					{
						prop: 'version',
						label: '版本号',
						align: 'center'
					},
					{
						prop: 'versionDesc',
						label: '版本描述',
						align: 'center'
					},
					{
						prop: 'appId',
						label: '插件ID',
						align: 'center'
					},
					{
						prop: 'platform',
						label: '平台',
						align: 'center'
					},
					{
						prop: 'keyWords',
						label: '关键字',
						align: 'center'
					},
					{
						prop: 'createTime',
						label: '创建时间',
						align: 'center',
						sortable: true
					},
					{
						prop: 'updateTime',
						label: '更新时间',
						align: 'center',
						sortable: true
					},
					{
						align: 'center',
						type: 'op',
						layout: ['slot-readme-btn', 'slot-audit-btn'],
						fixed: 'right',
						width: '130px'
					}
				]"
			>
				<!-- logo-->
				<template #column-logo="{scope}">
					<el-image
						fit="cover"
						lazy
						:src="scope.row.logo + '?x-oss-process=image/resize,h_100'"
						:preview-src-list="[scope.row.logo]"
						:style="{
							height: '40px',
							width: '40px'
						}"
					></el-image>
				</template>

				<!-- 下载地址-->
				<template #column-downloadUrl="{scope}">
					<a class="a-style" @click="linkDownload(scope.row.downloadUrl)">点击下载</a>
				</template>

				<!-- 类型 -->
				<template #column-type="{scope}">
					<el-tag v-if="scope.row.type == 0" size="small" effect="plain" type
						>系统</el-tag
					>
					<el-tag v-if="scope.row.type == 1" size="small" effect="plain" type
						>官方</el-tag
					>
					<el-tag v-if="scope.row.type == 2" size="small" effect="plain" type="success"
						>开发者</el-tag
					>
				</template>

				<!-- 简介 -->
				<template #slot-readme-btn="{scope}">
					<el-button type="text" size="mini" @click="showReadMe(scope.row)"
						>简介</el-button
					>
				</template>

				<!-- 审核 -->
				<template #slot-audit-btn="{scope}">
					<el-button
						v-permission="$service.app.audit.permission.review"
						type="text"
						size="mini"
						@click="toAudit(scope.row)"
						>审核</el-button
					>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<cl-pagination />
		</el-row>

		<cl-form ref="cl-form">
			<template #slot-audit-app></template>
		</cl-form>

		<el-dialog title="应用简介" :visible.sync="dialogReadMe" v-if="dialogReadMe">
			<div id="readmeContent"></div>
		</el-dialog>
	</cl-crud>
</template>

<script>
import marked from "marked";
import axios from "axios";
export default {
	data() {
		return {
			crud: null,
			dialogReadMe: false
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.app.audit).done();

			app.refresh();
		},

		async toAudit(e) {
			let { id, name } = e;

			const form = this.$refs["cl-form"].open({
				props: {
					title: `审核应用`,
					width: "400px",
					"label-width": "80px"
				},

				items: [
					{
						label: "应用名称",
						prop: "name",
						value: name,
						component: {
							name: "el-input",
							attrs: {
								disabled: true
							}
						}
					},
					{
						label: "审核结果",
						prop: "status",
						value: 2,
						component: {
							name: "el-radio-group",
							options: [
								{
									label: "通过",
									value: 2
								},
								{
									label: "不通过",
									value: 3
								}
							],
							on: {
								change: (index) => {
									this.changeType(index);
								}
							}
						}
					},
					{
						label: "理由",
						prop: "failReason",
						hidden: true,
						component: {
							name: "el-input",
							props: {
								type: "textarea"
							},
							attrs: {
								placeholder: "审核不通过时，请填写理由"
							}
						},
						rules: [
							{ min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" }
						]
					}
				],

				on: {
					submit: (data, { done, close }) => {
						this.$service.app.audit
							.review({
								id: e.id,
								status: data.status,
								failReason: data.failReason
							})
							.then(() => {
								this.$message.success(`应用[${data.name}]审核成功`);
								close();
								this.crud.refresh();
							})
							.catch((err) => {
								this.$message.error(err);
								done();
							});
					}
				}
			});
		},

		changeType(index) {
			const { toggleItem } = this.$refs["cl-form"];
			toggleItem("failReason", index != 3);
		},

		linkDownload(url) {
			window.open(url);
		},

		showReadMe(e) {
			this.dialogReadMe = true;
			let url = e.readme;
			if (typeof url == "undefined" || url == null || url == "") {
				return;
			}
			axios
				.get(url)
				.then((res) => {
					document.getElementById("readmeContent").innerHTML = marked(res || "");
				})
				.catch((err) => {
					console.log("error", err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.a-style {
	color: #0500ee;
	cursor: pointer;
	text-decoration: underline;
}
</style>
